<template>
  <v-card class="root-card">
    <h1>发布资讯</h1>
    <div :style="thumbnailVar" class="filter-box">
      <v-card @click="onClick" color="#fffff" height="200px" class="thumbnail">
        <v-img width="300px" height="200px" contain :src="article.thumbnail" />
      </v-card>
      <div class="input-field">
        <v-card color="#ffffff" class="input-card">
          <v-text-field
            dense
            v-model="article.title"
            label="标题"
            outlined
          ></v-text-field>
          <v-text-field
            v-model="article.source"
            label="来源"
            dense
            outlined
          ></v-text-field>
          <v-row>
            <v-col>
              <v-select
                dense
                @change="typeChange"
                v-model="article.type"
                :items="items"
                label="类型"
                outlined
              ></v-select></v-col
            ><v-col v-if="article.type === 3">
              <v-select
                dense
                @change="rumorTypeChange"
                v-model="article.extObj.keyword"
                :items="rumorTypes"
                label="谣言类型"
                outlined
              ></v-select>
            </v-col>
          </v-row>
        </v-card>
      </div>
    </div>
    <v-divider class="mx-4" style="margin-top: 1vh"></v-divider>
    <div style="background: #ffffff">
      <DocEditor
        :content="article.content"
        @editor-input="editorRefresh"
        :read_only="false"
      />

      <v-btn style="margin-top: 15px; left: 90%" @click="saveedit"> 保存</v-btn>
    </div>
    <input
      type="file"
      id="file-uploader"
      accept="image/*"
      v-show="false"
      @change="uploadPic"
    />
  </v-card>
</template>

<script>
import DocEditor from "@/components/views/common/DocEditor.vue";
export default {
  components: { DocEditor },
  name: "ArticleEdit",
  data: () => ({
    article: {
      thumbnail: null,
      content: "详细内容在此编辑",
      type: 1,
      title: "",
      extObj: { keyword: "谣言" },
      id: 0,
      source: "",
      rumorExtObj: { keyword: "谣言" },
    },
    items: [
      {
        text: "新闻",
        value: 1,
      },
      {
        text: "辟谣",
        value: 3,
      },
      {
        text: "知识",
        value: 2,
      },
    ],
    rumorTypes: ["谣言", "真相"],
  }),
  computed: {
    pubTime() {
      return this.article.pubTime.substring(0, 10);
    },
    thumbnailVar() {
      return {
        "--thumbnail-src":
          this.article.thumbnail != null
            ? "url(" + this.article.thumbnail + ")"
            : "url(https://cdn.pixabay.com/photo/2016/09/22/06/32/blue-1686529_1280.jpg)",
      };
    },
  },
  created() {
    var id = parseInt(this.$route.params.id);
    console.log(this.$route.params);
    if (! (id in this.$route.params)) {
      id = 0;
      return;
    }
    this.$api.article
      .read(id)
      .then((res) => {
        if (res.success) {
          this.article = res.data;
          this.article.pubTime = this.article.pubTime.substring(0, 10);
          if (!("extObj" in this.article)) {
            this.article;
          }
        } else {
          this.$Message.error("打开文章失败：" + res.exc);
        }
      })
      .then(() => {
        this.$Message.error("打开文章失败：网络错误");
      });
  },
  methods: {
    editorRefresh(e) {
      this.article.content = e;
    },
    typeChange() {
      console.log(this.article.type);
    },
    onClick() {
      document.getElementById("file-uploader").click();
    },
    uploadPic(e) {
      if (e.target.files === null || e.target.files.length === 0) return;
      var file = e.target.files[0];
      if (file != null) {
        //图片接口
        this.$fileService.uploadFile(file, (result) => {
          if (result.success) this.article.thumbnail = result.url;
          else this.$Message.error("图片上传错误: " + result.exc);
        });
      }
    },
    saveedit() {
      this.$api.article
        .saveedit(this.article)
        .then((res) => {
          if (res.success) {
            this.$Message.success("保存成功");
            this.$router.push("/article/" + res.id);
          } else {
            this.$Message.error("保存失败，原因" + res.exc);
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$Message.error("请求失败,出现了意料之外的错误");
        });
    },
  },
};
</script>

<style scoped>
.root-card {
  margin: 100px auto;
  width: 60vw;
  padding: 50px;
}
.filter-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-image: var(--thumbnail-src);
  background-position: center center;
  background-size: 90% 200px;
  height: 300px;
  display: flex;
  flex-direction: row;
}
.filter-box:after {
  content: "";
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: -30px;
  right: -30px;
  margin: 30px;
  backdrop-filter: blur(25px);
  /* filter: blur(10px); */
  z-index: -1;
}
.thumbnail {
  flex: 1;
  margin: auto 30px;
  height: 200px;
  /* width:300px; */
}
.input-field {
  flex: 3;
  height: 200px;
  margin: auto 30px;
}
.input-card {
  padding: 10px;
}
</style>
